<template>
	<div>
		<el-dialog
			:title="title"
			:visible.sync="visible"
			:close-on-click-modal="false"
			append-to-body
			width="50%"
			:before-close="dialogBeforeClose"
		>
			<el-form
				ref="form"
				:model="formData"
				:rules="rules"
				label-width="80px"
				:inline="false"
				size="normal"
			>
				<el-form-item v-if="parentMenuName" label="父级菜单">
					<el-input v-model="parentMenuName" disabled />
				</el-form-item>
				<el-form-item label="菜单名称" prop="menuName">
					<el-input v-model="formData.menuName" clearable />
				</el-form-item>
				<el-form-item label="菜单路径" prop="menuHref">
					<el-input v-model="formData.menuHref" clearable />
				</el-form-item>
				<el-form-item
					v-if="formData.menuType != 0"
					label="菜单模式"
					prop="menuClassType"
				>
					<el-select
						v-model="formData.menuClassType"
						placeholder="请选择"
						clearable
					>
						<el-option
							v-for="item in menuClassTypeOptions"
							:key="item.value"
							:label="item.display"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="菜单icon" prop="menuIcon">
					<el-input v-model="formData.menuIcon" clearable />
				</el-form-item>
				<el-form-item label="是否启用" prop="whetherEnable">
					<el-select
						v-model="formData.whetherEnable"
						placeholder="请选择"
						clearable
					>
						<el-option
							v-for="item in whetherEnableOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="是否显示" prop="hideFlag">
					<el-select v-model="formData.hideFlag" placeholder="请选择" clearable>
						<el-option
							v-for="item in whetherEnableOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="菜单类型" prop="menuType">
					<el-select v-model="formData.menuType" placeholder="请选择" clearable>
						<el-option
							v-for="item in menuTypeOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" @click="onSubmit">
						确定
					</el-button>
					<el-button size="medium" @click="handlerCancel"> 取消 </el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		menuData: {
			type: Object,
			default: () => {
				return {}
			},
		},
		parentMenu: {
			type: Object,
			default: () => {
				return {}
			},
		},
		visible: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '',
		},
		menuClassTypeOptions: {
			type: Array,
			default: () => {
				return []
			},
		},
		menuDialogType: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			rules: {
				menuName: [
					{ required: true, message: '请输入菜单名称', trigger: 'blur' },
				],
				// menuHref: [
				// 	{ required: true, message: '请输入菜单地址', trigger: 'blur' },
				// ],
				whetherEnable: [
					{ required: true, message: '请选则是否启用', trigger: 'change' },
				],
				hideFlag: [
					{ required: true, message: '请选则是否显示', trigger: 'change' },
				],
				menuType: [
					{ required: true, message: '请选则菜单类型', trigger: 'change' },
				],
				menuClassType: [
					{ required: true, message: '请选则菜单模式', trigger: 'change' },
				],
			},
			whetherEnableOptions: [
				{
					value: '1',
					label: '否',
				},
				{
					value: '0',
					label: '是',
				},
			],
			menuTypeOptions: [
				{
					value: '0',
					label: '层级',
				},
				{
					value: '1',
					label: '菜单',
				},
			],
		}
	},
	computed: {
		formData() {
			return this.menuData
		},
		parentMenuName() {
			return this.parentMenu ? this.parentMenu.menuName : false
		},
	},
	methods: {
		dialogBeforeClose() {
			this.$emit('update:visible', false)
			if (this.parentMenu) {
				this.$emit('update:parentMenu', {})
			}
			this.$emit('update:menuData', {
				menuName: '',
				menuHref: '',
				menuIcon: '',
				menuType: '1',
				menuClassType: '0',
				whetherEnable: '0',
				hideFlag: '0',
			})
			this.handlerResetFields()
		},
		onSubmit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.$emit(
						'submit',
						this.formData,
						{ ...this.parentMenu },
						this.menuDialogType,
					)
				} else {
					return false
				}
			})
		},
		handlerCancel() {
			this.handlerResetFields()
			this.dialogBeforeClose()
		},
		handlerResetFields() {
			this.$nextTick(() => {
				this.$refs['form'].clearValidate()
			})
		},
	},
}
</script>

<style lang="scss" scoped></style>
